import { BaseReactElementState, BaseReactElement, reactControl, BaseReactElementControl } from "pao-aop-client";
import React from "react";
import { addon } from "pao-aop";
import { ListView, Card, Tabs } from "antd-mobile";
import { AppServiceUtility } from "src/projects/app/appService";
import { ROUTE_PATH } from "src/projects/app/util-tool";
import { Row, Col, Button, } from "antd";
import './index.less';
import { request } from "src/business/util_tool";
// const Item = List.Item;
// const Brief = Item.Brief;

function MyBody(props: any) {
    return (
        <div className="am-list-body my-body" style={{ height: '100%' }}>
            {props.children}
        </div>
    );
}

/**
 * 组件：服务列表状态
 */
export interface ServiceListViewState extends BaseReactElementState {
    /** 长列表数据 */
    dataSource?: any;
    /** 请求的数据 */
    list?: any[];
    /** 上拉加载 */
    upLoading?: boolean;
    /** 下拉刷新 */
    pullLoading?: boolean;
    /** 长列表容器高度 */
    height?: any;
    /** 当前第几页 */
    page: number;
    /** 记录tab状态 */
    tab_status?: string;
    /** 已完成 */
    do_list?: any[];
}

/**
 * 组件：服务列表
 * 服务列表
 */
export class ServiceListView extends BaseReactElement<ServiceListViewControl, ServiceListViewState> {
    constructor(props: any) {
        super(props);
        const ds = new ListView.DataSource({
            rowHasChanged: (r1: any, r2: any) => r1 !== r2
        });
        this.state = {
            dataSource: ds,
            list: [],
            do_list: [],
            upLoading: false,
            pullLoading: false,
            height: document.documentElement!.clientHeight,
            page: 1,
            tab_status: 'participate',
        };
    }
    componentDidMount() {
        request(this, AppServiceUtility.service_record_service.get_service_record_list_all!({ user_filter: true, states: '待接收' }))
            .then((data: any) => {
                this.setState({
                    list: data!.result.reverse()
                });
            })
            .catch((err) => {
                console.info(err);
            });
        request(this, AppServiceUtility.service_record_service.get_service_record_list_all!({ user_filter: true, states: '已完成' }))
            .then((data: any) => {
                this.setState({
                    do_list: data!.result.reverse()
                });
            })
            .catch((err) => {
                console.info(err);
            });
    }
    onClickRow = (id: string) => {
        // console.info(id);
        this.props.history!.push(ROUTE_PATH.servicerServiceDetails + '/' + id);
    }
    onSeeDetiles = (id: string) => {
        this.props.history!.push(ROUTE_PATH.servicerOrderDetails + '/' + id);
    }
    render() {
        const { list, dataSource, do_list } = this.state;
        const renderRow = (owData: any, sectionID: any, rowID: any) => {
            return (
                <div>
                    <Card full={false} className='list-conten' style={{ padding: '10px 10px', margin: '10px 0', }}>
                        <Card.Header title={owData.service_provider_name} />
                        <Row type='flex' justify='center'>
                            <Col className='list-col' span={10}><img src={owData.service_product_img && owData.service_product_img[0]} style={{ height: '72pt', width: '110pt' }} /></Col>
                            <Col span={14} className='list-col'>
                                <Row><strong>{owData.task_name}</strong></Row>
                                <Row>
                                    {owData.purchaser_name}<span style={{ float: 'right', }}>{owData.task_state}</span>
                                </Row>
                                <Row>{owData.create_date}</Row>
                                {/* <Row><Col span={8}>{owData.service_provider_name}</Col></Row> */}
                                <Row>{owData.service_provider_name}</Row>
                                {/* <Row>
                                    {owData.task_address}
                                </Row> */}
                            </Col>
                        </Row>
                        <Row>
                            <Button style={{ float: 'right', }} onClick={this.onClickRow.bind(this, owData.id)} type='primary'>开始执行</Button>
                        </Row>
                        {/* <Card.Footer extra={<Button onClick={this.onClickRow.bind(this, owData.id)} type='primary'>开始执行</Button>} /> */}
                    </Card>
                </div>
            );
        };
        const renderRow2 = (owData: any, sectionID: any, rowID: any) => {
            return (
                <div>
                    <Card full={false} className='list-conten' style={{ padding: '10px 10px', margin: '10px 0', }}>
                        <Card.Header title={owData.service_provider_name} />
                        <Row type='flex' justify='center'>
                            <Col className='list-col' span={10}><img src={owData.service_product_img && owData.service_product_img[0]} style={{ height: '72pt', width: '110pt' }} /></Col>
                            <Col span={14} className='list-col'>
                                <Row><strong>{owData.task_name}</strong></Row>
                                <Row>
                                    {owData.purchaser_name}<span style={{ float: 'right', }}>{owData.task_state}</span>
                                </Row>
                                <Row>{owData.create_date}</Row>
                                {/* <Row><Col span={8}>{owData.service_provider_name}</Col></Row> */}
                                <Row>{owData.service_provider_name}</Row>
                                {/* <Row>
                                    {owData.task_address}
                                </Row> */}
                            </Col>
                        </Row>
                        <Row>
                            <Button style={{ float: 'right', }} type='primary' onClick={this.onSeeDetiles.bind(this, owData.id)}>查看评价</Button>
                        </Row>
                        {/* <Card.Footer extra={<Button type='primary'>查看评价</Button>} /> */}
                    </Card>
                </div>
            );
        };
        const tabs = [
            { title: '待服务' },
            { title: '已完成' },
        ];
        return (
            <Row>
                <Tabs
                    tabs={tabs}
                    initialPage={0}
                >
                    <div className='tabs-content'>
                        {
                            list && list.length ?
                                <ListView
                                    ref={el => this['lv'] = el}
                                    dataSource={dataSource.cloneWithRows(list)}
                                    renderRow={renderRow}
                                    initialListSize={10}
                                    pageSize={10}
                                    renderBodyComponent={() => <MyBody />}
                                    style={{ height: this.state.height }}
                                />
                                :
                                <Row className='tabs-content' type='flex' justify='center'>
                                    暂无服务
                            </Row>

                        }
                    </div>
                    <div className='tabs-content'>
                        {
                            do_list && do_list.length ?
                                <ListView
                                    ref={el => this['lv'] = el}
                                    dataSource={dataSource.cloneWithRows(do_list)}
                                    renderRow={renderRow2}
                                    initialListSize={10}
                                    pageSize={10}
                                    renderBodyComponent={() => <MyBody />}
                                    style={{ height: this.state.height }}
                                />
                                :
                                <Row className='tabs-content' type='flex' justify='center'>
                                    暂无服务
                            </Row>

                        }
                    </div>
                </Tabs>

            </Row>
        );
    }
}

/**
 * 控件：服务列表控制器
 * 服务列表
 */
@addon('ServiceListView', '服务列表', '服务列表')
@reactControl(ServiceListView, true)
export class ServiceListViewControl extends BaseReactElementControl {
    constructor() {
        super();
    }
}